<script setup>
import { computed, ref } from 'vue';
// pinia的使用
import { useAppStore } from '../../../stores/app';
import { toRefs } from 'vue';
const { langIndex } = toRefs(useAppStore());

import input from '../../../assets/data/input.json'
const stepSMS = computed(() => { return Object.keys(input.SMS).map(key => input.SMS[key]).filter((item, index) => index !== 0 && index !== 1) });
console.log(stepSMS.value);
const stepSMSdesc = computed(() => { return stepSMS.value.slice(0, 13).map(item => item.def) })
console.log(stepSMSdesc.value);
const ingredient = computed(() => { return stepSMS.value.slice(13, 36).map(item => item.def) })
console.log(ingredient.value);
const stepSMSdesc2 = computed(() => { return stepSMS.value.slice(36, 37).map(item => item.def) })
console.log(stepSMSdesc2.value);

const selectedCategory = ref(ingredient.value);
const categories = ref([
    { name: '是', key: '1' },
    { name: '否', key: '0' },
]);
</script>
<template>
    <div style="display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr)">
        <div class="flex gap-2" v-for="(item, index) in stepSMS.slice(0, 13)" :key="index">
            <label for="username" style="display: flex;align-items: center;">{{ item.lang[langIndex] }}:</label>
            <InputText id="username" v-model=stepSMSdesc[index] aria-describedby="username-help"
                style="width: 280px;height: 35px;" />
        </div>
    </div>
    <!-- 分隔符 -->
    <Divider type="dashed" />
    <!-- 分隔符 -->
    <div style="display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr)">

        <div class="flex gap-2" v-for="(item, index) in stepSMS.slice(13, 36)" :key="index" >
            <label for="username" style="display: flex;align-items: center;">{{ item.lang[langIndex] }}&nbsp; </label>
            <div class="flex align-items-center">
                <div v-for="category in categories" :key="category.key" class="flex align-items-center ml-2">
                    <RadioButton v-model="selectedCategory[index]" :inputId="category.key" name="dynamic" :value="category.key" />
                    <label :for="category.key" class="ml-2">{{ category.name }}</label>
                </div>
            </div>
        </div>

    </div>
    <!-- 分隔符 -->
    <Divider type="dashed" />
    <!-- 分隔符 -->
    <div style="display: grid; gap: 10px;">
        <div class="flex gap-2" v-for="(item, index) in stepSMS.slice(36, 38)" :key="index">
            <label for="username" style="display: flex;align-items: center;">{{ item.lang[langIndex] }}:</label>
            <InputText id="username" v-model=stepSMSdesc2[index] aria-describedby="username-help"
                style="width: 500px;height: 35px;" />
        </div>
    </div>
</template>
